<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>

		<title>SelectBox Plug-in</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">

		<script type="text/javascript" src='http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js'></script>
		<!-- custom select plugin js -->
		<script type="text/javascript" src='http://jquerycustomselectbox.googlecode.com/svn/trunk/WebRoot/cust_selectbox_plugin/cust_select_plugin_1.0.js'></script>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" type="text/css" href="../generalstyle.css">
		<!--[if IE]>
			<link rel="stylesheet" type="text/css" href="ie_style.css" >
		<![endif]-->
	</head>

<script>
	$(document).ready( function() {
		
		$(".select_wrap").custSelectBox();
		/* 
		//BASIC USE
		$("#select_1").custSelectBox();
		
		//CHECKBOX USE
		$("#select_2").custSelectBox({
			boxtype:"selectboxoptions_check",
			selectname:"select_2"
			});
		//ADVANCED USE 
		$("#select_3").custSelectBox({
			isscrolling: 	true,				//scrolls long lists
			scrollminitems:	5,					//items before scrolling
			scrollheight:	100,				//height of scrolling window
			preopenselect:	false,				//opens prechecked select boxes
			openspeed:		"slow",			//selectbox open speed "slow","normal","fast" or numbers 1000
			isdisabled:		false,
			selectwidth:	150,
			});
		*/
	});
</script>
	<body>
	<div id="page_wrapper">
	<h2>jQuery Custom Select Box
	<div>By: Darren Mason</div>
	<div><a href="http://plugins.jquery.com/project/customselectbox">Download Here</a></div>
	<div><a href="http://mypocket-technologies.com/jquery/cust_radio_buttons/">Other Plugins</a></div>
	</h2>
	<label class="lbl_header">HTML EXAMPLE</label>
	<pre class="html">
&#60;div class="select_wrap"&#62;
     &#60;div class="selectbox"&#62;
        &#60;ul&#62;
          &#60;li&#62;
            Sample Two Long
          &#60;/li&#62;
        &#60;/ul&#62;
     &#60;/div&#62;
     &#60;div class="selectboxoptions_wrap"&#62;
        &#60;ul&#62;
          &#60;li class="selected"&#62;
            &#60;span class="elmValue"&#62;1&#60;/span&#62;
            Item One
          &#60;/li&#62;
          &#60;li&#62;
            &#60;span class="elmValue"&#62;2&#60;/span&#62;
            Item Two
          &#60;/li&#62;
        &#60;/ul&#62;
     &#60;/div&#62;
&#60;/div&#62;
	</pre>
	
	<label class="lbl_header">BASIC USAGE</label>
	<div class="code">
	<code>
	<pre>
<span  class="html">Applies to all boxes</span>
$(".select_wrap").custSelectBox();
<span  class="html">Applies to single box</span>
$("#select_1").custSelectBox();
	</pre>
	</code>
	</div>
	<p/>
	<div class="select_wrap" id="select_1">
			<div class="selectbox">
				<ul>
					<li>
						Sample One
					</li>
				</ul>
			</div>
			<div class="selectboxoptions_wrap">
				<ul>
					<li class="selected">
					<span class="elmValue">1</span>
						Item One
					</li>
					<li>
					<span class="elmValue">2</span>
						Item Two
					</li>
					<li>
					<span class="elmValue">3</span>
						Item Three
					</li>
					<li>
					<span class="elmValue">4</span>
						Item Four
					</li>
					<li>
					<span class="elmValue">5</span>
						Item Five
					</li>					
				</ul>
			</div>
		</div>
		
	<label class="lbl_header">CHECKBOX USAGE</label>
	<div class="code">
	<code>
	<pre>
$("#select_2").custSelectBox({
	boxtype:"selectboxoptions_check",
	selectname:"select_2"
});
	</pre>
	</code>
	</div>
	<p/>	
		<div class="select_wrap" id="select_2">
			<div class="selectbox">
				<ul>
					<li>
						Sample Two Long
					</li>
				</ul>
			</div>
			<div class="selectboxoptions_wrap">
				<ul>
					<li class="selected">
					<span class="elmValue">1</span>
						Item One
					</li>
					<li>
					<span class="elmValue">2</span>
						Item Two
					</li>
					<li>
					<span class="elmValue">3</span>
						Item Three
					</li>
					<li>
					<span class="elmValue">4</span>
						Item Four
					</li>
					<li>
					<span class="elmValue">5</span>
						Item Five
					</li>					
				</ul>
			</div>
		</div>
		<label class="lbl_header">ADVANCED USAGE</label>
		<div class="code">
		<code>
		<pre>
$("#select_3").custSelectBox({
	isscrolling:		true,
	scrollminitems:		5,	
	scrollheight:		100,		
	preopenselect:		false,		
	openspeed:		"slow",		
	isdisabled:		false,
	selectwidth:		150
});
			</pre>
	</code>
	</div>
	<p/>
		<div class="select_wrap" id="select_3">
			<div class="selectbox">
				<ul>
					<li>
						Sample Three Scroll
					</li>
				</ul>
			</div>
			<div class="selectboxoptions_wrap">
				<ul>
					<li class="selected">
					<span class="elmValue">1</span>
						Item One
					</li>
					<li>
					<span class="elmValue">2</span>
						Item Two
					</li>
					<li>
					<span class="elmValue">3</span>
						Item Three
					</li>
					<li>
					<span class="elmValue">4</span>
						Item Four
					</li>
					<li>
					<span class="elmValue">5</span>
						Item Five
					</li>					
				</ul>
			</div>
		</div>
	</div>
	</body>
</html>
